<template>
  <div class="mdp-header">
    <h1 class="tit">{{ sysName }}</h1>
    <div class="user-btns">
      <span v-if="$route.path !== '/iap/workspace'">当前工作区： {{currWorkspace}}</span>
      <a href="javascript:void(0);" v-if="$route.path !== '/iap/workspace'" @click="goHome">切换工作区</a>
      <a href="javascript:void(0);" @click="goBack">返回</a>
      <a href="javascript:void(0);" @click="logout">退出</a>
    </div>
  </div>
</template>
<script>
import { nextPage } from '../../../../assets/js/index'
import { mixinParams } from '../../../../assets/js/iapMixin'
import {mapState, mapGetters} from 'vuex'
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/ajax'
export default {
  name: 'iHeader',
  mixin: [mixinParams],
  data () {
    return {
      currWorkspace: ''
    }
  },
  watch: {
    workspaceFlag: {
      handler: function (val) {
        this.currWorkspace = val
        this.workspaceFlag = false
      },
      deep: true
    }
  },
  computed: {
    ...mapState([
      'workspaceId'
    ]),
    ...mapGetters([
      'sysName'
    ])
  },
  methods: {
    goHome () {
      this.$confirm('确定要切换到工作区首页吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        nextPage('/iap/workspace')
        sessionStorage.removeItem('workspaceName')
        sessionStorage.removeItem('workspaceId')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    goBack () {
      window.location.href = '/view/systemList'
      sessionStorage.removeItem('workspaceName')
      sessionStorage.removeItem('workspaceId')
    },
    showWchatPic () {},
    // 生成二维码
    getBaseUrl () {
      ajax.get(api.QUERY_BASE_URL).then(res => {
        console.log(res)
      })
    },
    // 退出登录
    logout () {
      this.$confirm('将退出登录是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ajax.post(api.LOGOUT).then(res => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
          setTimeout(() => {
            window.location.href = '/'
          }, 500)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    }
  },
  created () {
    let workspaceName = sessionStorage.getItem('workspaceName')
    this.currWorkspace = workspaceName
  }
}
</script>
<style lang="stylus">
.mdp-header
  height 70px
  padding 0 15px
  background #409eff
  position relative
  z-index 1
  .tit
    font-size 24px
    height 70px
    line-height 70px
    margin-left 6px
    color #fff
    float left
  .logo
    position absolute
    left 0
    top 0
    width 160px
    height 70px
    background url(../../../../images/ip-logo.png) no-repeat center center
  .user-btns
    float right
    a, .el-select, span
      float left
      color #fff
      margin 0 15px
    .el-select
      height 30px
      margin 20px 15px 0
      .el-input
        .el-select__caret
          color #fff
      .el-input__inner
        height 30px
        line-height 30px
        padding-left 0
        color #fff
        background rgba(255, 255, 255, 0)
        border-radius 0
        border 0 none
        border-bottom 1px solid #fff
        &::placeholder
          color #fff
    a, span
      height 70px
      line-height 70px
      &.we-chat
        width 20px
        background url('') no-repeat center center
a:hover
  color #4093ff
</style>
